<template>
  <div>

    <div class="row">
      <div class="col-md-12">

        <div class="portlet box grey-cascade" style="margin-bottom: 15px;min-height: auto !important;">
          <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-globe"></i>月统计数据
            </div>
          </div>
          <div class="portlet-body">
            <div class="row">
              <div class="col-md-12">
                <div class="record">
                  <div class="title">用水统计</div>
                  <div class="tjCon">
                    <span class="water">
                      78
                      <span class="prevent">
                        个
                      </span>
                      <span>正在进行</span>  
                    </span>
                    <span class="water">
                      80
                      <span class="prevent">
                        +15%
                      </span>
                      <span>总用水量</span>
                    </span>
                  </div>
                </div>
              </div>
            
            </div>
             
          </div>
        </div>
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade">
          <transition name="fade">
            <Loading :listLoading.sync="loading"></Loading>
          </transition>
          <div class="portlet-title">
            
            <div class="caption">
              <i class="fa fa-globe"></i>历史记录
            </div>
           <div class="cz">
            <button class="btn green" @click="displayImg" style="color:#fff;margin-right: 10px;">图表 
                </button>
            <button class="btn green" @click="displayList" style="color:#fff;">列表 
                </button>
              <button class="btn green">导出为Excel</button>
            </div>
          </div>
          <div class="portlet-body" :class="{hide:tableDiv}">   
            <div class="row mbStyle">
              <div class="col-md-2" style="padding-left: 0;">
                <div class="block">
                  <el-date-picker
                    v-model="value11"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </div>
              </div>
              <div class="col-md-1 mb10">
                <button class="btn green">查询 <i class="fa fa-search"></i></button>
              </div>      
            </div>  
            <div>
              作为饼图

              右为线图
            </div>
          </div>
          <div class="portlet-body" :class="{hide:imgDiv}">
            <div class="row color mbStyle">
              <div class="col-md-2 mb10" style="padding-left: 0;">
              <i class="el-input__icon el-icon-caret-bottom"></i>
                <select data-v-912aa5a4="" class="bs-select form-control" style="margin-right: 25px;">
                  <option data-v-912aa5a4="">请选任务类型</option> 
                  <option data-v-912aa5a4="">类型1</option> 
                  <option data-v-912aa5a4="">类型2</option>
                </select>
              </div>
              <div class="col-md-3 mb10">
                <input type="text" class="form-control" placeholder="请输入关键字">
              </div>
              <div class="col-md-1 mb10">
                <button class="btn green">查询 <i class="fa fa-search"></i></button>
              </div>
            </div>
            <div class="tableDiv">
              <el-table
                ref="multipleTable"
                :data="list"
                :border = true
                :stripe = true
                :row-class-name="tableRowClassName"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  label="序号"
                  :formatter="formatter"
                  width="100"
                  >
                </el-table-column>
                <el-table-column
                  prop="user_name"
                  label="月份"
                  >
                </el-table-column>
                <el-table-column
                  prop="sex"
                  label="任务数"
                  >
                  <template scope="scope">
                    <span v-if="scope.row.sex==0">女</span>
                    <span v-if="scope.row.sex==1">男</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="phone"
                  label="完成数"
                  >
                </el-table-column>
                <el-table-column
                  prop="room_infos"
                  label="逾期数"
                  >
                </el-table-column>
                <el-table-column
                  prop="role_name"
                  label="整改数"
                  >
                </el-table-column>
                <el-table-column
                  prop="role_name"
                  label="完成率"
                  >
                </el-table-column>
                <el-table-column
                  prop="role_name"
                  label="及时率"
                  >
                </el-table-column>
                <el-table-column
                  prop="role_name"
                  label="整改率"
                  >
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="200">
                  <template scope="scope">
                    <el-button @click="lookData(scope.row,scope.$index)" class="look" type="text" size="small">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
                
                <div class="block">                    
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 15]"
                    :page-size="page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div> 
            </div>
          </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
      </div>
    </div>
     

  </div>

</template>  

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.m10 .col-md-12 .col-md-2,.row .col-md-9{color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .row.m0{margin: 0;}
       .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}

     @media (max-width: 768px){
        
        .cz{margin-bottom: 0px;}
        .dataTotal{top: -5px;}
        .bs-select{width: 60%;}
      }
</style>
<style>
  .demo-table-expand {
    font-size: 0;
    }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
    }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    }
  .el-table__expanded-cell{border-bottom: 0 !important;padding: 0;}
  .el-table__expanded-cell .el-table{border: 0;margin-bottom: 0;}
  .el-table__body-wrapper{overflow: hidden;}
</style>
<script>
  import Metronic from '../../../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../../../static/js/pages/tips.js';
  import optVue from '../../../../../config/optVue.js';
  import Loading from '../../../../../components/loading.vue';
  export default {
     data(){
      return{
        list:[],
        total:null, //总条数  
        lookObj:{},
        modifyNum:{},
        title:"",
        pageNum: null, //页数
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
        number:0,
   
        id:null,
        currentPage:1,
        loading:false,
        total:0,
        multipleSelection: [],
        kw:"",
        options: [],
        loading:false,
        tableDiv:false,
        imgDiv:true,
      }
    },
    components: {
        Loading
    },
    filters: {
      nodeTypeName: function(value) {
        return wbrwgl[value];
      }
    },
    mounted(){
      document.title = '计划模板管理';
      var that = this;
      this.title = document.title;
      optVue.pqxq(this);
      optVue.wbrwgl(this);
    },
    methods:{
      handleSizeChange(val) {
        var pageArr = {
          page_num:this.currentPage,
          page_size : val
        }

        this.pageFun(pageArr);
      },
      handleCurrentChange(val) {
        var pageArr = {
          page_num : val,
          page_size : this.page_size
        }

        this.loading = false;
        this.pageFun(pageArr);
      },
      pageFun:function(pageArr){

        this.loading = false;
        var that = this;
       
        setTimeout(function(){
          that.loading = true;
          optVue.jhmbglNowPag(that,pageArr);
        },that.loadTime)
      },
      addYgInfor:function(){
        this.$router.push({path:'/wbrwyqtsComonents', query: {type: 'add'}})
      },
      handleChange(val) { //下拉选择
        console.log(JSON.stringify(val));
      },
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
      
      },
      lookData:function(data,index){
        this.$router.push({path:'/wbfxInfor'})
      },
     
      lookSb:function(data,index){
        this.lookObj = data.list[index]
      },
        saveData:function(){
        
      },
      sureDelete:function(){

      },
      tableRowClassName(row, index) {
          //把每一行的索引放进row
          row.index = index
      },
      formatter(row, column ,cellValue) {
          //放回索引值
          return (this.page_num-1)*this.page_size+row.index+1
      }, 
      displayImg:function(){
        this.tableDiv = false;
        this.imgDiv = true;
      },
      displayList:function(){
        this.tableDiv = true;
        this.imgDiv = false;
      }
    }

  }

</script>  



